$color:#fff;
$banxin:690rem;
$theme:#f8e24a;
*{
    padding: 0;
    margin: 0;
    // background-color: red;
}
.singerpage{
    width: 690rem;
    margin: 0 auto;
    // 头部导航
    .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 100rem;
      span{
        font-size: 30rem;
        color: #ffffff;
        font-weight: 900;
      }
    }
    // 名片信息
    .userinfo{
        position: relative;
        margin-top: 160rem;
        height: 280rem;
        background-color: #000;
        border-radius: 18rem;
        padding: 0 35rem;
        display: flex;
        flex-direction: column;
        justify-content: end;
        box-sizing: border-box;
        .infot{
            display: flex;
            justify-content: start;
            align-items: center;
            position: absolute;
            left: 35rem;
            top: -45rem;

            img{
                width: 200rem;
                height: 200rem;
                border-radius: 200rem;
            }
            span{
                margin-left: 20rem;
                font-size: 30rem;
                font-weight: bold;
                color: #fefefe;
            }
        }
        .infob{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 35rem;
            font-size: 27rem;
            span{
                margin-right: 10rem;
                color: #6f6f6f;
            }
            .num{
               color: #fefefe;
            }
            .guanzhu{
                background-color: $theme;
                padding: 20rem 45rem;
                border-radius: 90rem;
                display: flex;
                justify-content: end;
                align-items: center;
                span{
                    color: #000;
                }
            }
        }
    }
    // 个人内容
    .navicat{
        display: flex;
        justify-content: space-between;
        border-bottom:1rem solid  #6f6f6f;
        margin-top: 60rem;
        .router-link-active {
            text-decoration: none;
            color: #fff;
            border-bottom: 2rem solid #fff;
            
          }
          a {
              display: block;
              width: 50%;
              text-align: center;
              height: 100rem;
            text-decoration: none;
            color: #6f6f6f;
            font-size: 35rem;
            font-weight: 500;
            

          }
    }
}